<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns="http://www.w3.org/1999/html"
      layout:decorate="layouts/default">
<head>
    <title>FundRequest - Request Details</title>
</head>

<th:block layout:fragment="content">
    <section class="section section--header mb-5">
        <div class="media">
            <div class="d-none d-md-flex header-image">
                <img th:src="@{${request.icon}(size=200)}" th:alt-title="${request.owner}" />
            </div>
            <div class="media-body">
                <h1 class="mb-2 media">
                    <div class="media-body text-center text-md-left">
                        <span class="d-inline-block d-md-none">
                            <img th:src="@{${request.icon}(size=32)}" th:alt-title="${request.owner}" />
                        </span>
                        <span>
                            <span th:text="${request.owner}">FundRequest</span> /
                            <span th:text="${request.repo}">new plugin</span> <span class="text-muted">#<span
                                th:text="${request.issueNumber}">948</span></span>
                        </span>
                    </div>
                    <starred-link class="ml-2" sec:authorize="isFullyAuthenticated()"
                                  th:attr="'v-bind:starred'=${request.starred}, 'v-bind:id'=${request.id}"></starred-link>
                </h1>

                <div class="request-details">

                    <div class="request-details__content">
                        <div class="request-details__info mb-1 mb-md-2 mb-lg-4">
                            <div class="request-details__header">
                                <span class="request-details__title" th:text="${request.title}">Request title</span>
                            </div>
                            <div class="request-details__status">
                            <span class="request-details__badge badge badge-pill"
                                  th:classappend="'badge--' + ${#strings.toLowerCase(#strings.replace(request.status, ' ', '_'))}"
                                  th:text="${request.status}">Claimed</span>
                                <span class="request-details__icons">
                                      <!--<i class="fab fa-linkedin-in"></i>-->
                                      <!--<i class="fab fa-twitter"></i>-->
                                </span>
                            </div>
                        </div>
                        <div class="request-details__funding-details mb-1">
                            <div class="request-details__price"
                                 th:if="${request.funds != null and request.funds.usdFunds != null}">
                                <span class="request-details__fund-currency">$</span>
                                <span class="request-details__fund-amount" th:if="${request.funds.usdFunds} >= 10"
                                      th:text="${#numbers.formatDecimal(request.funds.usdFunds,1,'COMMA',0,'POINT')}">-</span>
                                <span class="request-details__fund-amount" th:if="${request.funds.usdFunds} &lt; 10"
                                      th:text="${#numbers.formatDecimal(request.funds.usdFunds,1,'COMMA',2,'POINT')}">-</span>
                                <span class="disclaimer-asterix">*</span>
                            </div>
                            <div class="request-details__crypto">
                                <div class="request-details__fund" th:if="${request.funds.fndFunds != null}">
                                    <img class="request-details__fund-logo"
                                         th:src="@{/assets/img/tokens/__${request.funds.fndFunds.tokenImage}__}" />
                                    <span class="request-details__fund-amount"
                                          th:text="${#numbers.formatDecimal(request.funds.fndFunds.totalAmount,1,'COMMA',2,'POINT')}">-</span>
                                    <span class="request-details__fund-currency"
                                          th:text="${request.funds.fndFunds.tokenSymbol}">FND</span>
                                </div>
                                <div class="request-details__fund" th:if="${request.funds.otherFunds != null}">
                                    <img class="request-details__fund-logo"
                                         th:src="@{/assets/img/tokens/__${request.funds.otherFunds.tokenImage}__}" />
                                    <span class="request-details__fund-amount"
                                          th:text="${#numbers.formatDecimal(request.funds.otherFunds.totalAmount,1,'COMMA',2,'POINT')}">-</span>
                                    <span class="request-details__fund-currency"
                                          th:text="${request.funds.otherFunds.tokenSymbol}">FND</span>
                                </div>
                            </div>
                        </div>
                        <div class="request-details__actions">
                            <span th:attr="'data-dynamic-content'='/requests/'+${request.id}+'/actions'"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <request-detail th:attr="'v-bind:request'=${requestJson}"
                        v-bind:phase-filter-default="'info'"
                        v-bind:filters="[
                    { value: 'info', title: 'Info', description: 'Detailed description of the request' },
                    { value: 'details', title: 'Details', description: 'An overview of the funders and funds.' }
                 ]">
        <template slot-scope="{phaseFilter}">
            <div class="card mb-5" v-if="phaseFilter === 'info'">
                <div class="card-body">
                    <div class="request-details d-flex flex-wrap flex-md-nowrap align-items-start">
                        <div class="request-details__logo">
                            <div>
                                <img th:src="@{${request.icon}(size=30)}" th:alt-title="${request.owner}" />
                            </div>
                            <div class="request-details__owner">
                                <font-size-fit v-bind:max-size="15" v-bind:key="'owner'" th:text="${request.owner}">
                                    FundRequest
                                </font-size-fit>
                            </div>
                        </div>
                        <div class="request-details__markdown" th:utext="${request.description}"></div>
                    </div>
                </div>
            </div>
            <div class="row mb-5" v-if="phaseFilter === 'info'">
                <div class="col-12">
                    <h2 class="section-title">Comments</h2>
                    <h3 class="section-subtitle">
                        Comments posted on the request
                    </h3>
                </div>
                <div class="col-12">
                    <div class="card comment" th:each="comment : ${githubComments}">
                        <div class="card-body">
                            <div class="request-details d-flex flex-wrap flex-md-nowrap align-items-start">
                                <div class="request-details__logo">
                                    <div>
                                        <img th:src="@{${comment.userAvatar}(size=45)}"
                                             th:alt-title="${comment.userName}"/>
                                    </div>
                                    <div class="request-details__owner mb-3">
                                        <font-size-fit v-bind:max-size="15" v-bind:key="'username'"
                                                       th:text="${comment.userName}">FundRequest
                                        </font-size-fit>
                                    </div>
                                    <div class="request-details__last-modified-at">
                                        <small>Commented</small>
                                        <font-size-fit v-bind:max-size="15">
                                            <timeago
                                                    th:attr="'v-bind:since'='&quot;' + ${comment.createdAt} + '&quot;'"
                                                    v-bind:auto-update="60"></timeago>
                                        </font-size-fit>
                                    </div>
                                </div>
                                <div class="request-details__markdown" th:utext="${comment.body}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card" th:classappend="${claims.claims.isEmpty() ? 'mb-5': ''}" v-if="phaseFilter === 'details'">
                <div class="card-header">
                    Funded by
                </div>
                <div class="card-body">
                    <div class="request-funding">
                        <div class="request-funding__transfers">
                            <div th:each="fund : ${funds.userFunds}" th:remove="tag">
                                <div class="request-funding__transfer">
                                    <div class="request-details__label">
                                        <span class="request-details__label-text" th:text="${#profiles.findByUserId(fund.funderUserId).map(#profiles.getName()).orElse(fund.funderAddress)}">Karel Striegel</span>
                                        <span class="request-details__label-badge badge badge-pill badge-primary" th:if="${#authentication.getName() eq fund.funderUserId}">You</span>
                                        <span class="request-details__label-badge badge badge-pill badge-primary" th:if="${pendingRefundAddresses.contains(#strings.toLowerCase(fund.funderAddress))}">
                                            Refund pending
                                        </span>
                                        <form th:action="@{'/requests/' + ${request.id} + '/refunds'}" method="post" class="request-details__label-refund-form"
                                              th:if="${#authentication.getName() eq fund.funderUserId and #funds.isRefundable(profile, fund, request.id, request.status)}">
                                            <input
                                                type="hidden"
                                                th:name="${_csrf.parameterName}"
                                                th:value="${_csrf.token}" />
                                            <input type="hidden" name="funder_address" th:value="${fund.funderAddress}"/>
                                            <input type="submit" value="Request refund" class="btn btn-sm btn-block btn-primary"/>
                                        </form>
                                    </div>
                                    <div class="request-details__fund" th:if="${fund.fndFunds != null}">
                                        <span class="request-details__fund-amount"
                                              th:text="${#numbers.formatDecimal(fund.fndFunds.totalAmount,1,'COMMA',2,'POINT')}">100,00</span>
                                        <span class="request-details__fund-currency"
                                              th:text="${fund.fndFunds.tokenSymbol}">FND</span>
                                    </div>
                                    <div class="request-details__fund" th:if="${fund.otherFunds != null}">
                                        <span class="request-details__fund-amount"
                                              th:text="${#numbers.formatDecimal(fund.otherFunds.totalAmount,1,'COMMA',2,'POINT')}">100,00</span>
                                        <span class="request-details__fund-currency"
                                              th:text="${fund.otherFunds.tokenSymbol}">XYZ</span>
                                    </div>
                                </div>
                                <div class="request-funding__transfer" th:if="${fund.fndRefunds ne null or fund.otherRefunds ne null}">
                                    <div class="request-details__label">
                                        <span class="request-details__label-text" th:text="${#profiles.findByUserId(fund.funderUserId).map(#profiles.getName()).orElse(fund.funderAddress)}">Karel Striegel</span>
                                        <span class="request-details__label-badge badge badge-pill badge-primary" th:if="${#authentication.getName() eq fund.funderUserId}">You</span>
                                        <span class="request-details__label-badge badge badge-pill badge-primary">Refund</span>
                                    </div>
                                    <div class="request-details__fund" th:if="${fund.fndRefunds != null}">
                                        <span class="request-details__fund-amount"
                                              th:text="${#numbers.formatDecimal(fund.fndRefunds.totalAmount,1,'COMMA',2,'POINT')}">100,00</span>
                                        <span class="request-details__fund-currency"
                                              th:text="${fund.fndRefunds.tokenSymbol}">FND</span>
                                    </div>
                                    <div class="request-details__fund" th:if="${fund.otherRefunds != null}">
                                        <span class="request-details__fund-amount"
                                              th:text="${#numbers.formatDecimal(fund.otherRefunds.totalAmount,1,'COMMA',2,'POINT')}">100,00</span>
                                        <span class="request-details__fund-currency"
                                              th:text="${fund.otherRefunds.tokenSymbol}">XYZ</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="request-funding__subtotal">
                            <div class="request-details__label">
                                Subtotal
                            </div>
                            <div class="request-details__fund" th:if="${funds.fndFunds != null}">
                                <span class="request-details__fund-amount"
                                      th:text="${#numbers.formatDecimal(funds.fndFunds.totalAmount,1,'COMMA',2,'POINT')}">100,00</span>
                                <span class="request-details__fund-currency"
                                      th:text="${funds.fndFunds.tokenSymbol}">FND</span>
                            </div>
                            <div class="request-details__fund" th:if="${funds.otherFunds != null}">
                                <span class="request-details__fund-amount"
                                      th:text="${#numbers.formatDecimal(funds.otherFunds.totalAmount,1,'COMMA',2,'POINT')}">100,00</span>
                                <span class="request-details__fund-currency"
                                      th:text="${funds.otherFunds.tokenSymbol}">XYZ</span>
                            </div>
                        </div>
                        <div class="request-funding__total">
                            <div class="request-details__label">
                                <span>Total</span>
                            </div>
                            <div class="request-details__price" th:if="${funds.usdFunds != null}">
                                <span class="request-details__fund-amount"
                                      th:text="${#numbers.formatDecimal(funds.usdFunds,1,'COMMA',2,'POINT')}">58</span>
                                <span class="request-details__fund-currency">USD</span>
                                <span class="disclaimer-asterix">*</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-5" th:if="${!claims.claims.isEmpty()}"  v-if="phaseFilter === 'details'">
                <div class="card-header">
                    Claimed by
                </div>
                <div class="card-body">
                    <div class="request-funding">
                        <div class="request-funding__transfers">
                            <div class="request-funding__transfer" th:each="claim : ${claims.claims}">
                                <div class="request-details__label">
                                    <span class="request-details__label-text"><a th:href="${'https://github.com/' + claim.solver}" th:text="${claim.solver}">Karel Striegel</a></span>
                                    <span class="request-details__label-badge badge badge-pill badge-primary" th:if="${(profile != null) and (profile.github != null) and (profile.github.username.equals(claim.solver))}">You</span>
                                    <div class="request-details__date">
                                        <span>&nbsp;-&nbsp;</span><timeago th:attr="'v-bind:since'='&quot;' + ${claim.timestamp} + '&quot;'" v-bind:auto-update="60"></timeago>
                                    </div>
                                </div>
                                <div class="request-details__transaction">
                                    <a th:if="${claim.transactionHash}" th:href="${@environment.getProperty('io.fundrequest.etherscan.basepath') + '/tx/' + claim.transactionHash}">View transaction</a>
                                </div>
                                <div class="request-details__fund" th:if="${claim.fndValue ne null}">
                                    <span class="request-details__fund-amount"
                                          th:text="${#numbers.formatDecimal(claim.fndValue.totalAmount, 1, 'COMMA', 2, 'POINT')}">100,00</span>
                                    <span class="request-details__fund-currency"
                                          th:text="${claim.fndValue.tokenSymbol}">FND</span>
                                </div>
                                <div class="request-details__fund" th:if="${claims.fndValue ne null and claim.fndValue eq null}">
                                    <span class="request-details__fund-amount"
                                          th:text="${#numbers.formatDecimal(0, 1, 'COMMA', 2, 'POINT')}">100,00</span>
                                    <span class="request-details__fund-currency"
                                          th:text="${claims.fndValue.tokenSymbol}">FND</span>
                                </div>
                                <div class="request-details__fund" th:if="${claim.otherValue ne null}">
                                    <span class="request-details__fund-amount"
                                          th:text="${#numbers.formatDecimal(claim.otherValue.totalAmount, 1, 'COMMA', 2, 'POINT')}">100,00</span>
                                    <span class="request-details__fund-currency"
                                          th:text="${claim.otherValue.tokenSymbol}">FND</span>
                                </div>
                                <div class="request-details__fund" th:if="${claims.otherValue ne null and claim.otherValue eq null}">
                                    <span class="request-details__fund-amount"
                                          th:text="${#numbers.formatDecimal(0, 1, 'COMMA', 2, 'POINT')}">100,00</span>
                                    <span class="request-details__fund-currency"
                                          th:text="${claims.otherValue.tokenSymbol}">FND</span>
                                </div>
                            </div>
                        </div>

                        <div class="request-funding__subtotal">
                            <div class="request-details__label">
                                Subtotal
                            </div>
                            <div class="request-details__fund" th:if="${claims.fndValue != null}">
                                <span class="request-details__fund-amount" th:text="${#numbers.formatDecimal(claims.fndValue.totalAmount, 1, 'COMMA', 2, 'POINT')}">100,00</span>
                                <span class="request-details__fund-currency" th:text="${claims.fndValue.tokenSymbol}">FND</span>
                            </div>
                            <div class="request-details__fund" th:if="${claims.otherValue != null}">
                                <span class="request-details__fund-amount" th:text="${#numbers.formatDecimal(claims.otherValue.totalAmount,1,'COMMA',2,'POINT')}">100,00</span>
                                <span class="request-details__fund-currency" th:text="${claims.otherValue.tokenSymbol}">XYZ</span>
                            </div>
                        </div>

                        <div class="request-funding__total">
                            <div class="request-details__label">
                                <span>Total</span>
                            </div>
                            <div class="request-details__price" th:if="${claims.usdValue != null}">
                                <span class="request-details__fund-amount" th:text="${#numbers.formatDecimal(claims.usdValue, 1, 'COMMA', 2, 'POINT')}">58</span>
                                <span class="request-details__fund-currency">USD</span>
                                <span class="disclaimer-asterix">*</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </request-detail>

    <section class="mb-2" id="faq" ref="faq">
        <faq v-bind:location="'/rest/faq/requestDetail'"></faq>
    </section>

</th:block>


<th:block layout:fragment="css">
</th:block>
<th:block layout:fragment="scripts">
</th:block>

</html>
